<template>
  <div>
    <supertable
      class="RoleTable"
      :tableData="tableData"
      :headerData="headerData"
      :isoperation="false"
      @IDchange="IDchangeFn"
      @Delete="DeleteFn"
      :total="tableData.length"
    >
      <template v-slot:formSolt>
        <div class="formSolt">
          <el-input
            class="RoleInput"
            size="small"
            placeholder="请输入角色名称"
            v-model="input"
          ></el-input>
          <el-button
            class="searchBtn"
            type="success"
            icon="el-icon-search"
            size="mini"
            @click="rolelistFn()"
            >搜索</el-button
          >
          <el-button
            type="primary"
            icon="el-icon-refresh"
            size="mini"
            @click="reset()"
            >重置</el-button
          >
        </div>
      </template>
      <template v-slot:btnSolt>
        <div class="btnSolt">
          <el-button
            type="success"
            icon="el-icon-plus"
            size="mini"
            @click="add()"
            >添加</el-button
          >
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="mini"
            @click="modification()"
            >修改</el-button
          >
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            @click="roleDeleteFn()"
            >删除</el-button
          >
          <el-button
            type="primary"
            icon="el-icon-setting"
            size="mini"
            @click="Permission()"
            >权限配置</el-button
          >
        </div>
      </template>
    </supertable>
    <!-- 添加 -->
    <div>
      <el-dialog
        title="添加角色"
        :visible.sync="dialogVisible"
        width="65%"
        :before-close="handleClose"
        v-DragWindow
      >
        <div class="elForm">
          <el-row>
            <el-form
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
              label-width="100px"
              :show-message="false"
              class="demo-ruleForm"
            >
              <el-col :span="12">
                <el-form-item label="编码" prop="code">
                  <el-input v-model="ruleForm.code"></el-input>
                </el-form-item>
                <el-form-item label="上级角色" prop="role">
                  <el-input
                    v-model="ruleForm.role"
                    @click.native="roleClick()"
                    placeholder="请选择上级角色"
                  ></el-input>
                  <el-tree
                    :expand-on-click-node="false"
                    :data="data1"
                    @node-click="handleNodeClick1"
                    v-if="treeshow1"
                  ></el-tree>
                </el-form-item>
                <el-form-item label="所在部门" prop="department" v-show="state">
                  <el-input
                    @click.native="departmentClick()"
                    v-model="ruleForm.department"
                    placeholder="请选择所在部门"
                  ></el-input>
                  <el-tree
                    :expand-on-click-node="false"
                    :data="data"
                    @node-click="handleNodeClick"
                    v-if="treeshow"
                  ></el-tree>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="名称" prop="name">
                  <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="排序" prop="sort">
                  <el-input v-model="ruleForm.sort"></el-input>
                </el-form-item>
                <el-form-item
                  label="所在部门"
                  prop="department"
                  v-show="!state"
                >
                  <el-input
                    v-model="ruleForm.department"
                    @click.native="departmentClick()"
                  ></el-input>
                  <el-tree
                    :expand-on-click-node="false"
                    :data="data"
                    node-key="id"
                    @node-click="handleNodeClick"
                    v-if="treeshow"
                  ></el-tree>
                </el-form-item>
              </el-col>
            </el-form>
          </el-row>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
    <!-- 修改 -->
    <div>
      <el-dialog
        title="添加角色"
        :visible.sync="Visible"
        width="65%"
        :before-close="handleClose"
        v-DragWindow
      >
        <div class="elForm">
          <el-row>
            <el-form
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
              label-width="100px"
              :show-message="false"
              class="demo-ruleForm"
            >
              <el-col :span="12">
                <el-form-item label="编码" prop="code">
                  <el-input v-model="ruleForm.code"></el-input>
                </el-form-item>
                <el-form-item label="上级角色" prop="role">
                  <el-input
                    v-model="ruleForm.role"
                    @click.native="roleClick()"
                  ></el-input>
                  <el-tree
                    :expand-on-click-node="false"
                    :data="data1"
                    @node-click="handleNodeClick1"
                    v-if="treeshow1"
                  ></el-tree>
                </el-form-item>
                <el-form-item label="所在部门" prop="department" v-show="state">
                  <el-input
                    @click.native="departmentClick()"
                    v-model="ruleForm.department"
                  ></el-input>
                  <el-tree
                    :expand-on-click-node="false"
                    :data="data"
                    @node-click="handleNodeClick"
                    v-if="treeshow"
                  ></el-tree>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="名称" prop="name">
                  <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="排序" prop="sort">
                  <el-input v-model="ruleForm.sort"></el-input>
                </el-form-item>
                <el-form-item
                  label="所在部门"
                  prop="department"
                  v-show="!state"
                >
                  <el-input
                    v-model="ruleForm.department"
                    @click.native="departmentClick()"
                  ></el-input>
                  <el-tree
                    :expand-on-click-node="false"
                    :data="data"
                    @node-click="handleNodeClick"
                    v-if="treeshow"
                  ></el-tree>
                </el-form-item>
              </el-col>
            </el-form>
          </el-row>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="Visible = false">取 消</el-button>
          <el-button type="primary" @click="modificationsubmitForm('ruleForm')"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
    <!-- 权限配置 -->
    <div>
      <el-dialog
        title="权限配置"
        :visible.sync="PermissionVisible"
        width="30%"
        :before-close="handleClose"
        v-DragWindow
      >
        <!-- :props="defaultProps" -->
        <div>
          <el-tree
            :data="Permissiondata"
            show-checkbox
            node-key="id"
            :props="defaultProps"
            @check-change="PermissionChange"
            :default-checked-keys="checkedIds"
          >
          </el-tree>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="PermissionSubmit()"
            >提 交</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import supertable from "@/components/supertable";
import {
  rolelist,
  role,
  deptlist,
  roleDelete,
  menuTreeListByRoleId,
  rolesavePermisson,
} from "@/api/RoleManagement";
export default {
  data() {
    return {
      total: null,
      page: 1,
      limit: 20,
      val: "",
      checkedIds: [],
      checkedIds2: [],
      Permissiondata: [],
      dataindex: "",
      pid: "",
      deptid: "",
      pName: "",
      treeshow: false,
      treeshow1: false,
      value: 0,
      state: true,
      input: "",
      page: 1,
      dialogVisible: false,
      Visible: false,
      PermissionVisible: false,
      options: [],
      headerData: [
        {
          prop: "name",
          label: "名称",
          width: "",
        },
        {
          prop: "code",
          label: "编码",
          width: "",
        },
        {
          prop: "department",
          label: "所在部门",
          width: "",
        },
        {
          prop: "role",
          label: "上级角色",
          width: "",
        },
      ],
      tableData: [],
      ruleForm: {
        code: "",
        role: "",
        department: "",
        name: "",
        sort: 1,
      },
      data: [],
      data1: [],
      defaultProps: {
        label: "name",
        children: "children",
      },
      rules: {
        code: [{ required: true, trigger: "blur" }],
        name: [{ required: true, trigger: "blur" }],
      },
    };
  },
  mounted() {
    let _self = this;
    //初始化请求表格数据
    _self.rolelistFn();
    _self.deptlistFn();
    _self.superiorRoleFn();
    // _self.menulistForRouterFn()
  },

  methods: {
    //权限配置tree节点选中状态发生变化时的回调
    handleCheckChange(data, checked, indeterminate) {
      console.log(data, checked, indeterminate);
    },
    //行数据传值
    IDchangeFn(val) {
      let _self = this;
      // console.log(val);
      _self.val = val;
    },
    //删除
    DeleteFn(val) {
      let _self = this;
      console.log(val);
      _self.val = val[0];
    },

    //删除
    roleDeleteFn() {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let _self = this;
          let data = {
            roleId: _self.val.id,
          };
          if (_self.val.id == 1) {
            this.$message({
              message: "超级管理员不可删除",
              type: "info",
            });
          } else {
            // console.log(_self.val.id);
            roleDelete(data).then((res) => {
              console.log(res);
              if (res.code == 20000) {
                _self.rolelistFn();
              }
            });
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    //权限配置
    Permission() {
      let _self = this;
      _self.PermissionVisible = true;
      let data = {
        roleId: _self.val.id,
      };
      menuTreeListByRoleId(data).then((res) => {
        console.log(res);
        if (res.code == 20000) {
          _self.Permissiondata = res.data.treeData;
          _self.checkedIds = res.data.checkedIds;
          // console.log(_self.checkedIds);
        }
      });
    },

    //权限配置tree节点点击回调
    PermissionChange(data) {
      let _self = this;
      // console.log(data.id);
      if (_self.checkedIds.indexOf(data.id) == -1) {
        _self.checkedIds.push(data.id);
      } else {
        _self.checkedIds.splice(_self.checkedIds.indexOf(data.id), 1);
      }
    },

    //权限配置 提交
    PermissionSubmit() {
      let _self = this;
      let data = {
        roleId: _self.val.id,
        permissions: _self.checkedIds,
      };
      rolesavePermisson(data).then((res) => {
        console.log(res);
        if (res.code == 20000) {
          this.$message({
            message: "操作成功",
            type: "success",
          });
        }
      });
      _self.PermissionVisible = false;
    },

    //修改
    modification() {
      let _self = this;
      _self.Visible = true;
      console.log(_self.val.id);
      _self.dataindex = _self.val.id;
      _self.ruleForm.name = _self.val.name;
      _self.ruleForm.code = _self.val.code;
      _self.ruleForm.role = _self.val.role;
      _self.ruleForm.department = _self.val.department;
      _self.ruleForm.sort = _self.val.num;
      _self.pid = _self.val.pid;
      _self.deptid = _self.val.deptid;
    },
    modificationsubmitForm(formName) {
      let _self = this;
      _self.data1 = [];
      _self.$refs[formName].validate((valid) => {
        if (valid) {
          _self.Visible = true;
          let data = {
            id: _self.dataindex,
            num: _self.ruleForm.sort,
            deptid: _self.deptid,
            pid: _self.pid,
            name: _self.ruleForm.name,
            tips: _self.ruleForm.code,
          };
          role(data).then((res) => {
            console.log(res);
            if (res.code == 20000) {
              _self.rolelistFn();
            }
          });
          _self.Visible = false;
        }
      });
    },

    //上级角色
    superiorRoleFn() {
      let _self = this;
    },
    //所在部门
    deptlistFn() {
      let _self = this;
      deptlist().then((res) => {
        // console.log(res);
        if (res.code == 20000) {
          _self.data = res.data;
        }
      });
    },

    //所在部门tree
    handleNodeClick(data) {
      let _self = this;
      console.log(data);
      _self.ruleForm.department = data.label;
      _self.treeshow = false;
      _self.deptid = data.id;
    },

    //上级角色tree
    handleNodeClick1(data) {
      let _self = this;
      console.log(data);
      _self.ruleForm.role = data.label;
      _self.pid = data.pid;
      _self.pName = data.role;
      console.log(_self.pName);
      _self.treeshow1 = false;
      _self.state = true;
    },

    //弹出缩进
    roleClick() {
      let _self = this;
      _self.treeshow1 = !_self.treeshow1;
      if (_self.treeshow1) {
        _self.state = false;
      } else {
        _self.state = true;
      }
    },
    departmentClick() {
      let _self = this;
      _self.treeshow = !_self.treeshow;
    },

    //添加按钮
    add() {
      let _self = this;
      _self.dialogVisible = true;
      _self.value = "";
      _self.dataindex = "";
      _self.ruleForm.name = "";
      _self.ruleForm.code = "";
      _self.ruleForm.role = "";
      _self.ruleForm.department = "";
      _self.ruleForm.sort = 1;
      _self.pid = "";
      _self.deptid = "";
    },

    //添加数据表单校验
    submitForm(formName) {
      let _self = this;
      _self.data1 = [];
      _self.$refs[formName].validate((valid) => {
        if (valid) {
          _self.dialogVisible = false;
          let data = {
            id: "",
            num: _self.ruleForm.sort,
            deptid: _self.deptid,
            pid: _self.pid,
            name: _self.ruleForm.name,
            tips: _self.ruleForm.code,
          };
          role(data).then((res) => {
            console.log(res);
            if (res.code == 20000) {
              _self.rolelistFn();
              this.$message({
                type: "success",
                message: "添加成功!",
              });
              _self.$refs[formName].resetFields();
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    //确认关闭
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },

    //重置
    reset() {
      let _self = this;
      _self.input = "";
      _self.rolelistFn();
    },

    //表格数据
    rolelistFn() {
      let _self = this;
      _self.tableData = [];
      let data = {
        page: _self.page,
        name: _self.input.trim(),
      };
      rolelist(data).then((res) => {
        console.log(res);
        if (res.code == 20000) {
          for (let item of res.data) {
            _self.options.push({
              value: _self.value++,
              label: item.name,
            });
            _self.data1.push({
              label: item.name,
              pid: item.id,
              role: item.pName,
            });
            _self.tableData.push({
              name: item.name,
              code: item.tips,
              department: item.deptName,
              role: item.pName,
              pid: item.pid,
              num: item.num,
              deptid: item.deptid,
              id: item.id,
            });
          }
        }
      });
    },
  },
  components: {
    supertable,
  },
};
</script>

<style scoped>
.RoleInput {
  width: 400px;
  margin: 20px 0;
}
.RoleTable {
  margin: 20px;
}
.btnSolt {
  margin: 10px 0;
}
.searchBtn {
  margin-left: 10px;
}
.elForm .el-form-item {
  margin: 5px 0;
}
</style>